<!DOCTYPE html>



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">



  
  
    
      
    
    
      
    
  <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
  <link href="//cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
    
  
  <link href="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css">







  

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Vue,axios,element,">





  <link rel="alternate" href="/atom.xml" title="TiX" type="application/atom+xml">






<meta name="description" content="记录工作中的问题，做技术积累。">
<meta name="keywords" content="Vue,axios,element">
<meta property="og:type" content="article">
<meta property="og:title" content="记录vue+element的一些经验">
<meta property="og:url" content="https://gitee.com/L1334101793/记录vue-element的一些经验/index.html">
<meta property="og:site_name" content="TiX">
<meta property="og:description" content="记录工作中的问题，做技术积累。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2019-04-09T07:31:40.432Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="记录vue+element的一些经验">
<meta name="twitter:description" content="记录工作中的问题，做技术积累。">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    version: '5.1.4',
    sidebar: {"position":"right","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://gitee.com/L1334101793/记录vue-element的一些经验/">





  <title>记录vue+element的一些经验 | TiX</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-right page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">TiX</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">Stay Hungry, Stay Foolish</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://gitee.com/L1334101793/记录vue-element的一些经验/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="TiX">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="TiX">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">记录vue+element的一些经验</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-03-29T13:49:51+08:00">
                2019-03-29
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/js/" itemprop="url" rel="index">
                    <span itemprop="name">js</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          
            <span class="post-meta-divider">|</span>
            <span class="page-pv"><i class="fa fa-file-o">本文阅读</i>
            <span class="busuanzi-value" id="busuanzi_value_page_pv"></span>人次
            </span>
          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>记录工作中的问题，做技术积累。<br><a id="more"></a></p>
<h3 id="vue-element对表格的一些操作"><a href="#vue-element对表格的一些操作" class="headerlink" title="vue+element对表格的一些操作"></a>vue+element对表格的一些操作</h3><p>1.得到所点击单元格的行、列、表格信息、及事件信息<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">@cell-click=<span class="string">"cellclick"</span>  <span class="comment">#一定不要加()括号</span></span><br><span class="line"><span class="comment">#在method中打印可看到</span></span><br><span class="line">cellclick(row, column, cell, event) &#123;</span><br><span class="line">  console.log(row);</span><br><span class="line">  console.log(column);</span><br><span class="line">  console.log(cell);</span><br><span class="line">  console.log(event);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="前端加密与解密"><a href="#前端加密与解密" class="headerlink" title="前端加密与解密"></a>前端加密与解密</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># / </span></span><br><span class="line"><span class="comment"># * AES加密 </span></span><br><span class="line"><span class="comment"># * @sContent 加密内容 </span></span><br><span class="line"><span class="comment"># * @key 加密密码，由字母或数字组成 </span></span><br><span class="line"><span class="comment"># 　　　　　　此方法使用AES-128-ECB加密模式，key需要为16位 </span></span><br><span class="line"><span class="comment"># 　　　　　　加密解密key必须相同，如：abcd1234abcd1234 </span></span><br><span class="line"><span class="comment"># * @encrypted 加密密文 </span></span><br><span class="line"><span class="comment"># /</span></span><br><span class="line"></span><br><span class="line"><span class="comment">#1.npm 安装</span></span><br><span class="line">npm install crypto-js --save</span><br><span class="line"><span class="comment">#2.引入</span></span><br><span class="line">import CryptoJS from <span class="string">"crypto-js"</span>;</span><br><span class="line"><span class="comment">#3. 使用Encrypt 加密</span></span><br><span class="line">var key = <span class="string">"abcd1234abcd1234"</span>;</span><br><span class="line">var sKey = CryptoJS.enc.Utf8.parse(key);</span><br><span class="line">var sContent = CryptoJS.enc.Utf8.parse(_this.ruleForm.password);</span><br><span class="line">var encrypted = CryptoJS.AES.encrypt(sContent, sKey, &#123;</span><br><span class="line">  mode: CryptoJS.mode.ECB,</span><br><span class="line">  padding: CryptoJS.pad.Pkcs7</span><br><span class="line">&#125;).toString();</span><br><span class="line">console.log(encrypted);<span class="comment">#以上方法本人使用过，可用</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># /</span></span><br><span class="line"><span class="comment"># * AES解密 </span></span><br><span class="line"><span class="comment"># * @content 加密密文 =》  上面的encrypted</span></span><br><span class="line"><span class="comment"># * @key 加密密码，由字母或数字组成  =》 上面的sContent</span></span><br><span class="line"><span class="comment"># 　　　　　　此方法使用AES-128-ECB加密模式，key需要为16位 </span></span><br><span class="line"><span class="comment"># 　　　　　　加密解密key必须相同，如：abcd1234abcd1234 </span></span><br><span class="line"><span class="comment"># * @return 解密明文 </span></span><br><span class="line"><span class="comment"># /</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> decrypt(content, key)&#123;</span><br><span class="line">    var sKey = CryptoJS.enc.Utf8.parse(key);</span><br><span class="line">    var decrypt = CryptoJS.AES.decrypt(content, sKey, &#123;mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7&#125;);</span><br><span class="line">    <span class="built_in">return</span> CryptoJS.enc.Utf8.stringify(decrypt).toString();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="后端加密解密"><a href="#后端加密解密" class="headerlink" title="后端加密解密"></a>后端加密解密</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br></pre></td><td class="code"><pre><span class="line">package com.test;</span><br><span class="line">import javax.crypto.Cipher;</span><br><span class="line">import javax.crypto.spec.SecretKeySpec;</span><br><span class="line">import org.apache.commons.codec.binary.Base64;</span><br><span class="line">import org.apache.log4j.Logger;</span><br><span class="line"></span><br><span class="line">/*****************************************************</span><br><span class="line"> * AES加密解密工具</span><br><span class="line"> ****************************************************/</span><br><span class="line"></span><br><span class="line">public class AesUtil &#123;</span><br><span class="line">    </span><br><span class="line">    private static final Logger logger = Logger.getLogger(AesUtil.class); //<span class="built_in">log</span>日志</span><br><span class="line">    </span><br><span class="line">    private static final String ALGORITHM = <span class="string">"AES/ECB/PKCS5Padding"</span>;    //<span class="string">"算法/模式/补码方式"</span>  </span><br><span class="line">    </span><br><span class="line">    /*****************************************************</span><br><span class="line">     * AES加密</span><br><span class="line">     * @param content 加密内容</span><br><span class="line">     * @param key 加密密码，由字母或数字组成</span><br><span class="line">                此方法使用AES-128-ECB加密模式，key需要为16位</span><br><span class="line">                加密解密key必须相同，如：abcd1234abcd1234</span><br><span class="line">     * @<span class="built_in">return</span> 加密密文</span><br><span class="line">     ****************************************************/</span><br><span class="line">    </span><br><span class="line">    public static String enCode(String content, String key) &#123;</span><br><span class="line">        <span class="keyword">if</span> (key == null || <span class="string">""</span>.equals(key)) &#123;</span><br><span class="line">            logger.info(<span class="string">"key为空！"</span>);</span><br><span class="line">            <span class="built_in">return</span> null;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span> (key.length() != 16) &#123;</span><br><span class="line">            logger.info(<span class="string">"key长度不是16位！"</span>);</span><br><span class="line">            <span class="built_in">return</span> null;</span><br><span class="line">        &#125;</span><br><span class="line">        try &#123;</span><br><span class="line">            byte[] raw = key.getBytes();  //获得密码的字节数组</span><br><span class="line">            SecretKeySpec skey = new SecretKeySpec(raw, <span class="string">"AES"</span>); //根据密码生成AES密钥</span><br><span class="line">            Cipher cipher = Cipher.getInstance(ALGORITHM);  //根据指定算法ALGORITHM自成密码器</span><br><span class="line">            cipher.init(Cipher.ENCRYPT_MODE, skey); //初始化密码器，第一个参数为加密(ENCRYPT_MODE)或者解密(DECRYPT_MODE)操作，第二个参数为生成的AES密钥</span><br><span class="line">            byte [] byte_content = content.getBytes(<span class="string">"utf-8"</span>); //获取加密内容的字节数组(设置为utf-8)不然内容中如果有中文和英文混合中文就会解密为乱码            </span><br><span class="line">            byte [] encode_content = cipher.doFinal(byte_content); //密码器加密数据</span><br><span class="line">            <span class="built_in">return</span> Base64.encodeBase64String(encode_content); //将加密后的数据转换为字符串返回</span><br><span class="line">        &#125; catch (Exception e) &#123;</span><br><span class="line">            e.printStackTrace();</span><br><span class="line">            <span class="built_in">return</span> null;</span><br><span class="line">        &#125;  </span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment"># /</span></span><br><span class="line">    <span class="comment">#  * AES解密</span></span><br><span class="line">    <span class="comment">#  * @param content 加密密文</span></span><br><span class="line">    <span class="comment">#  * @param key 加密密码,由字母或数字组成</span></span><br><span class="line">    <span class="comment">#             此方法使用AES-128-ECB加密模式，key需要为16位</span></span><br><span class="line">    <span class="comment">#             加密解密key必须相同</span></span><br><span class="line">    <span class="comment">#  * @return 解密明文</span></span><br><span class="line">    <span class="comment">#  /</span></span><br><span class="line">    </span><br><span class="line">    public static String deCode(String content, String key) &#123;</span><br><span class="line">        <span class="keyword">if</span> (key == null || <span class="string">""</span>.equals(key)) &#123;</span><br><span class="line">            logger.info(<span class="string">"key为空！"</span>);</span><br><span class="line">            <span class="built_in">return</span> null;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span> (key.length() != 16) &#123;</span><br><span class="line">            logger.info(<span class="string">"key长度不是16位！"</span>);</span><br><span class="line">            <span class="built_in">return</span> null;</span><br><span class="line">        &#125;</span><br><span class="line">        try &#123;</span><br><span class="line">            byte[] raw = key.getBytes();  //获得密码的字节数组</span><br><span class="line">            SecretKeySpec skey = new SecretKeySpec(raw, <span class="string">"AES"</span>); //根据密码生成AES密钥</span><br><span class="line">            Cipher cipher = Cipher.getInstance(ALGORITHM);  //根据指定算法ALGORITHM自成密码器</span><br><span class="line">            cipher.init(Cipher.DECRYPT_MODE, skey); //初始化密码器，第一个参数为加密(ENCRYPT_MODE)或者解密(DECRYPT_MODE)操作，第二个参数为生成的AES密钥    </span><br><span class="line">            byte [] encode_content = Base64.decodeBase64(content); //把密文字符串转回密文字节数组</span><br><span class="line">            byte [] byte_content = cipher.doFinal(encode_content); //密码器解密数据</span><br><span class="line">            <span class="built_in">return</span> new String(byte_content,<span class="string">"utf-8"</span>); //将解密后的数据转换为字符串返回</span><br><span class="line">        &#125; catch (Exception e) &#123;</span><br><span class="line">            e.printStackTrace();</span><br><span class="line">            <span class="built_in">return</span> null;</span><br><span class="line">        &#125;  </span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment"># /</span></span><br><span class="line">    <span class="comment">#  * AES加密解密测试</span></span><br><span class="line">    <span class="comment">#  * @param args</span></span><br><span class="line">    <span class="comment">#  * @return </span></span><br><span class="line">    <span class="comment">#  /</span></span><br><span class="line">    </span><br><span class="line">    public static void main(String[] args) &#123;</span><br><span class="line">        String content = <span class="string">"加密解密测试"</span>;</span><br><span class="line">        logger.info(<span class="string">"加密content："</span>+content);</span><br><span class="line">        String key = <span class="string">"abcd1234abcd1234"</span>;</span><br><span class="line">        logger.info(<span class="string">"加密key："</span>+key);</span><br><span class="line">        String enResult = enCode(content, key);</span><br><span class="line">        logger.info(<span class="string">"加密result："</span>+enResult);</span><br><span class="line">        String deResult = deCode(enResult, key);</span><br><span class="line">        logger.info(<span class="string">"解密result："</span>+deResult);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="vue-axios做路由拦截（response）-请求回来的时候。"><a href="#vue-axios做路由拦截（response）-请求回来的时候。" class="headerlink" title="vue+axios做路由拦截（response）,请求回来的时候。"></a>vue+axios做路由拦截（response）,请求回来的时候。</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#http response 拦截器，用于判断token是否过期，</span></span><br><span class="line">axios.interceptors.response.use(</span><br><span class="line">    response =&gt; &#123;</span><br><span class="line">        <span class="built_in">return</span> response;  //请求成功的时候返回的data</span><br><span class="line">    &#125;,</span><br><span class="line">    error =&gt; &#123;</span><br><span class="line">        try &#123;</span><br><span class="line">            <span class="keyword">if</span> (error.response) &#123;</span><br><span class="line">                switch (error.response.status) &#123;</span><br><span class="line">                    <span class="keyword">case</span> 403://token过期，清除token并跳转到登录页面</span><br><span class="line">                       localStorage.clear();</span><br><span class="line">                       var baurl = window.location.href;</span><br><span class="line">               　　　　　router.replace(&#123;</span><br><span class="line">                                path: <span class="string">'/login'</span>,</span><br><span class="line">                                query: &#123; backUrl: baurl &#125;</span><br><span class="line">                            &#125;);                      </span><br><span class="line">                        <span class="built_in">return</span>;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="built_in">return</span> Promise.reject(error.response.data)</span><br><span class="line">        &#125;</span><br><span class="line">        catch (e) &#123;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br></pre></td></tr></table></figure>
<h3 id="vue-axios拦截（request），发送请求的时候，但是我没采用这种，见下。"><a href="#vue-axios拦截（request），发送请求的时候，但是我没采用这种，见下。" class="headerlink" title="vue+axios拦截（request），发送请求的时候，但是我没采用这种，见下。"></a>vue+axios拦截（request），发送请求的时候，但是我没采用这种，见下。</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#这里的config包含每次请求的内容，在这里把token放到请求头</span></span><br><span class="line">axios.interceptors.request.use(<span class="keyword">function</span> (config) &#123;  </span><br><span class="line">    <span class="built_in">let</span> token = ssesionStorage.getItem(<span class="string">"token"</span>);  //从缓存中取token</span><br><span class="line">    <span class="keyword">if</span> (token) &#123;</span><br><span class="line">        // config.headers.Authorization = token;    //将token放到请求头发送给服务器</span><br><span class="line"></span><br><span class="line">        //这里主要是为了兼容IE9</span><br><span class="line">        var browser = navigator.appName;</span><br><span class="line">        var b_version = navigator.appVersion;</span><br><span class="line">        <span class="keyword">if</span> (browser == <span class="string">'Netscape'</span> &amp;&amp; b_version.indexOf(<span class="string">';'</span>) &lt; 0) &#123;  //火狐</span><br><span class="line"></span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (b_version.indexOf(<span class="string">';'</span>) &lt; 0) &#123;</span><br><span class="line">                <span class="built_in">return</span> config;</span><br><span class="line">            &#125;</span><br><span class="line">            var version = b_version.split(<span class="string">";"</span>);</span><br><span class="line">            var trim_Version = version[1].replace(/[ ]/g, <span class="string">""</span>);</span><br><span class="line"></span><br><span class="line">            <span class="keyword">if</span> (browser == <span class="string">"Microsoft Internet Explorer"</span> &amp;&amp; trim_Version == <span class="string">"MSIE9.0"</span>) &#123;  //IE9</span><br><span class="line">                <span class="keyword">if</span> (config.url.indexOf(<span class="string">'?'</span>) &gt; 0) &#123;</span><br><span class="line">                    config.url = config.url + <span class="string">"&amp;token="</span> + JSON.parse(token).value;</span><br><span class="line">                &#125;</span><br><span class="line">                <span class="keyword">else</span> &#123;</span><br><span class="line">                    config.url = config.url + <span class="string">"?token="</span> + JSON.parse(token).value;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">       window.sessionStorage.clear();  //清空缓存</span><br><span class="line">       <span class="keyword">if</span> (router.currentRoute.name &amp;&amp; router.currentRoute.name.toLowerCase() == <span class="string">"login"</span>) &#123;  </span><br><span class="line">    　　　　//这里需要排除登陆(或者说是第一次请求获取token)的时候的请求验证，我这里没做处理</span><br><span class="line">　　　　　  //我的后台api接口，并没有对login接口做token验证，所以这里不做处理</span><br><span class="line">            console.log(<span class="string">"有token"</span>);</span><br><span class="line"></span><br><span class="line">        &#125; <span class="keyword">else</span> &#123; </span><br><span class="line">    　　　　//除登陆接口外，其他需要token验证的方法，会走这里且返回null</span><br><span class="line">            console.log(<span class="string">"没有token"</span>);</span><br><span class="line">            router.push(&#123; path: <span class="string">"/login"</span> &#125;);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">return</span> config;</span><br><span class="line">&#125;, <span class="keyword">function</span> (err) &#123;</span><br><span class="line">    <span class="built_in">return</span> Promise.reject(err);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="把token写到配置文件中（注：这种方式使用form表单提交，json格式见下）"><a href="#把token写到配置文件中（注：这种方式使用form表单提交，json格式见下）" class="headerlink" title="把token写到配置文件中（注：这种方式使用form表单提交，json格式见下）"></a>把token写到配置文件中（注：这种方式使用form表单提交，json格式见下）</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#单独写一个文件夹，新建config.js、API.js</span></span><br><span class="line">config.js中配置</span><br><span class="line"></span><br><span class="line">import Qs from <span class="string">'qs'</span>  <span class="comment">#序列化字符串，使用工具qs来处理参数，npm安装即可</span></span><br><span class="line"><span class="built_in">export</span> default&#123;</span><br><span class="line">      url: <span class="string">'/route'</span>,</span><br><span class="line">      baseURL: <span class="string">'自己的地址'</span>,  //测试服务器</span><br><span class="line">      method:<span class="string">'POST'</span>,</span><br><span class="line"></span><br><span class="line">      transformRequest: [<span class="keyword">function</span> (data) &#123;</span><br><span class="line">        //为了避免qs格式化时对内层对象的格式化先把内层的对象转为</span><br><span class="line">        data.CustData = JSON.stringify(data.CustData);</span><br><span class="line">        //由于使用的form-data传数据所以要格式化</span><br><span class="line">        data = Qs.stringify(data);</span><br><span class="line">        <span class="built_in">return</span> data;</span><br><span class="line">      &#125;],</span><br><span class="line"></span><br><span class="line">      transformResponse: [<span class="keyword">function</span> (data) &#123;</span><br><span class="line">        <span class="built_in">return</span> data;</span><br><span class="line">      &#125;],</span><br><span class="line">      headers: &#123;</span><br><span class="line">          <span class="string">'Content-Type'</span>:<span class="string">'application/x-www-form-urlencoded'</span>,</span><br><span class="line">          <span class="string">'token'</span>: window.sessionStorage.getItem(<span class="string">'token'</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">      params: &#123;&#125;,</span><br><span class="line"></span><br><span class="line">      paramsSerializer: <span class="keyword">function</span>(params) &#123;</span><br><span class="line">        <span class="built_in">return</span> Qs.stringify(params)</span><br><span class="line">      &#125;,</span><br><span class="line"></span><br><span class="line">      data: &#123;&#125;,</span><br><span class="line"></span><br><span class="line">    timeout: 10000,</span><br><span class="line"></span><br><span class="line">    withCredentials: <span class="literal">false</span>, </span><br><span class="line"></span><br><span class="line">    responseType: <span class="string">'json'</span>, </span><br><span class="line"></span><br><span class="line">    onUploadProgress: <span class="keyword">function</span> (progressEvent) &#123;</span><br><span class="line">        // Do whatever you want with the native progress event</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    onDownloadProgress: <span class="keyword">function</span> (progressEvent) &#123;</span><br><span class="line">        // Do whatever you want with the native progress event</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    maxContentLength: 2000,</span><br><span class="line"></span><br><span class="line">    validateStatus: <span class="keyword">function</span> (status) &#123;</span><br><span class="line">        <span class="built_in">return</span> status &gt;= 200 &amp;&amp; status &lt; 300; </span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    maxRedirects: 5, </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">API.js中</span><br><span class="line">import axios from <span class="string">'axios'</span></span><br><span class="line">import config from <span class="string">'./config'</span></span><br><span class="line">const API = &#123;</span><br><span class="line">    login(param) &#123;    <span class="comment">#之后用这个函数来调用发请求。</span></span><br><span class="line">      config.data = param</span><br><span class="line">      <span class="built_in">return</span> axios.post(<span class="string">'/login'</span>, &#123;&#125;, config)</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="built_in">export</span> default API</span><br><span class="line"></span><br><span class="line">main.js中</span><br><span class="line">import API from <span class="string">'./api/API'</span> <span class="comment">#引入自己配置的API</span></span><br><span class="line">Vue.prototype.<span class="variable">$http</span> = API <span class="comment">#修改原型链,使得可以全局使用this.$http调用http请求</span></span><br><span class="line"></span><br><span class="line">使用：</span><br><span class="line"><span class="built_in">let</span> resData = &#123;</span><br><span class="line">  name: xxx,</span><br><span class="line">  password: xxx</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">let</span> response = this.<span class="variable">$http</span>.login(resData);</span><br><span class="line">response.then(<span class="keyword">function</span>(res) &#123;</span><br><span class="line">  <span class="comment">#成功的请求数据</span></span><br><span class="line">&#125;).catch(<span class="keyword">function</span>(err) &#123;</span><br><span class="line">  console.log(err);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="使用json格式来发送数据"><a href="#使用json格式来发送数据" class="headerlink" title="使用json格式来发送数据"></a>使用json格式来发送数据</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#跟form发送数据基本一样，只是在config中data处理不同，新建congif2</span></span><br><span class="line"><span class="comment">#config2中使用下面代码即可，其他雷同。</span></span><br><span class="line">transformRequest: [<span class="keyword">function</span> (data) &#123;</span><br><span class="line">    data = JSON.stringify(data);</span><br><span class="line">    <span class="built_in">return</span> data;</span><br><span class="line">&#125;],</span><br></pre></td></tr></table></figure>

      
    </div>
    
    
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div></div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/wcpay.png" alt="TiX 微信支付">
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/alipay.png" alt="TiX 支付宝">
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/Vue/" rel="tag"># Vue</a>
          
            <a href="/tags/axios/" rel="tag"># axios</a>
          
            <a href="/tags/element/" rel="tag"># element</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/vue组件间通信的几种方式/" rel="next" title="vue组件间通信的几种方式">
                <i class="fa fa-chevron-left"></i> vue组件间通信的几种方式
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/关于vue中数据不更新问题总结/" rel="prev" title="关于vue中数据不更新问题总结">
                关于vue中数据不更新问题总结 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">TiX</p>
              <p class="site-description motion-element" itemprop="description">个人学习记录，涉及前端，分享心得等。</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">21</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">6</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">12</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#vue-element对表格的一些操作"><span class="nav-number">1.</span> <span class="nav-text">vue+element对表格的一些操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#前端加密与解密"><span class="nav-number">2.</span> <span class="nav-text">前端加密与解密</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#后端加密解密"><span class="nav-number">3.</span> <span class="nav-text">后端加密解密</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue-axios做路由拦截（response）-请求回来的时候。"><span class="nav-number">4.</span> <span class="nav-text">vue+axios做路由拦截（response）,请求回来的时候。</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue-axios拦截（request），发送请求的时候，但是我没采用这种，见下。"><span class="nav-number">5.</span> <span class="nav-text">vue+axios拦截（request），发送请求的时候，但是我没采用这种，见下。</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#把token写到配置文件中（注：这种方式使用form表单提交，json格式见下）"><span class="nav-number">6.</span> <span class="nav-text">把token写到配置文件中（注：这种方式使用form表单提交，json格式见下）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#使用json格式来发送数据"><span class="nav-number">7.</span> <span class="nav-text">使用json格式来发送数据</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2019 &mdash; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">TiX</span>

  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Mist</a> v5.1.4</div>




        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="site-uv">
      <i class="fa fa-user">访客</i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      人次
    </span>
  

  
    <span class="site-pv">
      <i class="fa fa-eye">总访问</i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      人次
    </span>
  
</div>








        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
